<template>
  <div>
    <div class="container">
      <el-table
        :data="tableData"
        style="width: 80%"
        stripe
        border
        header-cell-class-name="active-header"
        cell-class-name="table-center">
        <el-table-column prop="profession" label="职级"> </el-table-column>
        <el-table-column prop="score" label="记分标准"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          profession: "正高二级",
          score: 0,
        },
        {
          profession: "正高三级",
          score: 0,
        },
        {
          profession: "正高四级",
          score: 0,
        },
        {
          profession: "副高五级",
          score: 0,
        },
        {
          profession: "副高六级",
          score: 0,
        },
        {
          profession: "副高七级",
          score: 0,
        },
        {
          profession: "中级八级",
          score: 0,
        },
        {
          profession: "中级九级",
          score: 0,
        },
        {
          profession: "中级十级",
          score: 0,
        },
        {
          profession: "初级十一级",
          score: 0,
        },
        {
          profession: "初级十二级",
          score: 0,
        },
        {
          profession: "新进博士",
          score: 0,
        },
        {
          profession: "新进硕士",
          score: 0,
        },
        {
          profession: "见习",
          score: 0,
        },
      ],
    };
  },
  methods: {
    async getTableData() {
      const res = await this.$api.getTeaStandard();
      console.log(res);
      this.tableData = res.data.data;
    },
  },
  mounted() {
    this.getTableData();
    console.log("教师岗标准分值---teacherScore");
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  width: 94%;
  height: 700px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;

  /deep/ .el-table__row {
    height: 20px;
  }

  /deep/ .el-table__cell {
    padding: 8px 0;
  }

  /deep/ .active-header {
    color: #333;
    text-align: center;
  }
  /deep/ .table-center {
    text-align: center;
  }
  /deep/ .el-table td,
  /deep/.el-table th {
    border-bottom: 1px solid #333 !important; /* 横向边框颜色 */
    border-right: 1px solid #333 !important; /* 纵向边框颜色 */
  }
}
</style>
